<template>
	<view>
		<carHeader :title="'洗车'"></carHeader>
		<view class="top" v-for="(item,index) in carList" :key="index">
			<image :src="item.img" class="container"></image>
			<view class="top1">
				<span style="font-size: 38rpx;">{{item.merchantName}}</span>
				<view class="one-up-left">
					<view v-for="(item,index) in item.rate" :key="index">
						<image src="../../static/车联网服务-01专业洗车1slices/五星@2x.png" mode="widthFix"></image>
					</view>
					<view style="margin-left: 10rpx; font-size: 26rpx;">{{item.rate=== null ? 0 : item.rate}}分</view>
					<text
						style="margin-left: 30rpx; font-size: 26rpx;">销量：{{item.count=== null ? 0 : item.count}}</text>
				</view>
			</view>

			<view class="container-right">
				营业时间:<text style="margin-left: 20rpx;" space="ensp">{{item.startTime}}至{{item.endTime}}</text></br>
				位置:<span
					style="margin-left: 20rpx;">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</span>
				<span @click="tiaozhuanMap">
					<image src="../../static/车联网服务-04汽车保养-03门店详情_slices/plane.png"></image>
				</span>

			</view>
		</view>
		<view class="middle">
			<span style="font-size: 36rpx;font-weight: bold;">服务项目</span>
			<!-- <view class="project" v-for="(item,index) in projectList" :key="index"> -->
				<radio-group @change="radioChange">
					<label class="project" v-for="(item, index) in projectList" :key="item.index" :data-item="item.serviceDetailsId">			
						<radio :value="item.serviceDetailsId" :checked="index === current" />
						<span class="span1">{{item.name}}</span>
						<span class="span2">¥{{item.presentPrice}}</span>
						<span class="span3">¥{{item.originalPrice}}</span>
					</label>
				</radio-group>
			<!-- </view> -->
		</view>
		<view class="buttom">
			<span style="font-size: 36rpx;font-weight: bold;">服务评价</span>
			<view class="appraise" v-for="(item,index) in appraiseList" :key="index" >
				<image :src="item.user.avatar" class="avatar"></image>
				<span class="span4">{{item.user.userName}}</span>
				<span class="span5">{{item.evaluationTime.substring(0,10)}}</span>
				<view class="scoreUrl">
					<view v-for="(item,index) in item.starRating" :key="index">
						<image src="../../static/车联网服务-01专业洗车1slices/五星@2x.png" mode="widthFix"></image>
					</view>
					<view style="margin-left: 10rpx; font-size: 26rpx;">
						{{item.starRating=== null ? 0 : item.starRating}}分</view>
				</view>
				<span class="span6">{{item.evaluationContent}}</span>
			</view>
		</view>
		<view class="booking" @click="dingdan">
			<image src="../../static/车联网服务-04汽车保养-03门店详情_slices/矩形 10 拷贝.png"></image>
			<span>立即预约</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carList: [],
				projectList: [],
				appraiseList: [],
				current: null,
				serviceId:null,
				merchantId:null
			};
		},
		onLoad(options) {
			const that = this;
			console.log(options);
			console.log(options.merchantId);
			let id = options.merchantId;
			that.merchantId = options.merchantId;
			uni.request({
				url: "http://localhost:8080/carUser/getMerchant",
				method: "GET",
				data: {
					merchantId: id
				},
				success(res) {
					console.log(res);
					that.carList = res.data.data;
					console.log(that.carList);
				},
				fail() {
					console.log("失败了");
				}
			});
			uni.request({
				url: "http://localhost:8080/carUser/getServiceDetails",
				method: "GET",
				data: {
					merchantId: id
				},
				success(res) {
					console.log(res);
					that.projectList = res.data.data;
					console.log(that.projectList);
				},
				fail() {
					console.log("失败了projectList");
				}
			});
			uni.request({
				url: "http://localhost:8080/carUser/getEvaluation",
				method: "GET",
				data: {
					merchantId: id
				},
				success(res) {
					console.log(res);
					that.appraiseList = res.data.data;
					console.log(that.appraiseList);
				},
				fail() {
					console.log("失败了appraiseList");
				}
			});


		},
		methods: {
			radioChange: function(evt) {
				const that = this;
				console.log(evt);
			            for (let i = 0; i < this.projectList.length; i++) {
			                if (this.projectList[i].serviceDetailsId === evt.detail.value) {
			                    this.current = i;
			                    break;
			                }
			            }
						console.log("服务ID");
						console.log(evt.detail.value);
						that.serviceId = evt.detail.value;
						
			        },
			tiaozhuanMap() {
				console.log("跳转到地图");
				uni.navigateTo({
					url: "/pages/baoyangdaohang/baoyangdaohang"
				})

			},
			dingdan(res){
				console.log(res);
				const data = { serviceId: this.serviceId,merchantId: this.merchantId};
				const queryString = Object.keys(data)
				  .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
				  .join('&');
				 
				uni.navigateTo({
				  url: `/pages/zhuanyexichequerendingdan/zhuanyexichequerendingdan?${queryString}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.one-up-left {
		width: 100%;
		// background-color: #87cefa;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	carHeader {
		z-index: 20;
	}

	.top {
		width: 95%;
		height: 700rpx;
		background-color: white;
		position: relative;
		top: -220rpx;
		left: 20rpx;
		border-radius: 30rpx;
		display: flex;
		padding: 20rpx 20rpx;
		box-sizing: border-box;

		.top1 {
			width: 350rpx;
			height: 200rpx;
			position: absolute;
			top: 440rpx;

			// display: flex;
			image {
				width: 25rpx;
				height: 25rpx;
				margin-right: 5rpx;
			}

			.sales {
				position: relative;
				top: -43rpx;
				left: 240rpx;
			}

			.right-top {
				color: #1C81FD;
				position: relative;
				top: -120rpx;
				left: 500rpx;
				font-weight: bold;
			}
		}

		.container {
			width: 100%;
			height: 400rpx;
			border-radius: 20rpx;
		}

		.container-right {
			flex-wrap: wrap;
			position: absolute;
			top: 540rpx;
			font-size: 30rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				position: relative;
				top: 5rpx;
				left: 20rpx
			}
		}
	}

	.middle {
		width: 95%;
		// height:500rpx;
		background-color: white;
		position: relative;
		top: -200rpx;
		left: 20rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 40rpx;

		.project {
			width: 100%;
			height: 80rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eeeeee;

			.span1 {
				line-height: 80rpx;
				font-size: 30rpx;
			}

			.span2 {
				line-height: 80rpx;
				font-size: 30rpx;
				color: red;
				position: absolute;
				left: 500rpx;
			}

			.span3 {
				line-height: 80rpx;
				font-size: 24rpx;
				color: #7E7E7E;
				position: absolute;
				left: 600rpx;
				text-decoration: line-through;
			}
		}
	}

	.buttom {
		width: 95%;
		// height:500rpx;
		background-color: white;
		position: relative;
		top: -180rpx;
		left: 20rpx;
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 40rpx;

		.appraise {
			width: 100%;
			height: 280rpx;
			padding: 20rpx;
			box-sizing: border-box;
			position: relative;
			border-bottom: 1rpx solid #eeeeee;

			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}

			.span4 {
				font-size: 36rpx;
				font-weight: 500;
				font-family: "Microsoft YaHei", sans-serif;
				position: absolute;
				top: 30rpx;
				left: 200rpx;
			}

			.span5 {
				font-size: 24rpx;
				color: #7E7E7E;
				position: absolute;
				top: 30rpx;
				left: 480rpx;
			}

			.scoreUrl {
				display: flex;
				position: relative;
				top: -40rpx;
				left: 90rpx;

				image {
					width: 25rpx;
					height: 25rpx;
				}
			}

			.span6 {
				display: inline-block;
				position: absolute;
				top: 150rpx;
				left: 200rpx;
				font-size: 30rpx;
			}
		}
	}

	.booking {
		width: 100%;
		height: 100rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		/* 固定在底部 */
		align-items: center;
		display: flex;
		justify-content: center;
		box-sizing: border-box;

		image {
			width: 90%;
			height: 80rpx;
		}

		span {
			font-size: 36rpx;
			color: white;
			position: absolute;
		}
	}

	.scoreUrl {
		// border: #1C81FD solid 2rpx;
		margin-top: -50rpx;
		margin-left: 80rpx;
	}
</style>